<template>
  <div class="vaw-main-layout-container" :class="[appStore.isCollapse ? 'main-layout-close-status' : 'main-layout-open-status']">
    <TabBar style="flex-shrink: 0" />
    <!-- 内容 -->
    <section class="main-layout-scrollview">
      <main class="main-body">
        <a-scrollbar
          ref="scrollbarRef"
          :outer-class="[route.meta.disableScroll ? 'disable-scroll-bar' : '']"
          :outer-style="{ height: '100%', width: '100%', 'overflow-x': 'hidden' }"
          style="height: 100%; overflow-y: auto; overflow-x: hidden"
          @scroll="onScroll"
        >
          <Main />
          <div :style="{ height: height_fixed + 'px' }"> </div>
        </a-scrollbar>
      </main>
    </section>
  </div>
</template>

<script lang="ts">
  import { ref, watch, computed, defineComponent, provide, nextTick } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { useTitle } from '@vueuse/core'
  import { projectName } from '@/setting'
  import useAppConfigStore from '@/store/modules/app-config'
  import useCachedRouteStore from '@/store/modules/cached-routes'
  import { scrollManagerInstance as scrollManager } from '@/utils/scrollManager'

  export default defineComponent({
    name: 'MainLayout',
    props: {
      showNavBar: {
        type: Boolean,
        default: true,
      },
    },
    setup() {
      const appStore = useAppConfigStore()
      const isShowTabbar = computed(() => true)
      // 获取当前的cacheRoutes.cachedRoutes
      const cacheRoutesStore = useCachedRouteStore()
      const cacheRoutes = cacheRoutesStore.cachedRoutes
      const scrollPosition = ref(0)
      const router = useRouter()
      const route = useRoute()
      router.afterEach(() => {
        const title = route.meta.title || ''
        useTitle(projectName + ' | ' + title)
        // 清理已失效的滚动位置数据
        scrollManager.cleanScrollPosition()
      })
      // 切换页面回到顶部
      const scrollbarRef = ref()
      // 暴露滚动元素到子页面
      provide('scrollbarRef', scrollbarRef)
      watch(
        () => route.path,
        (curr, prev) => {
          // 记录prev的滚动位置
          if (prev) {
            scrollManager.saveScrollPosition(prev, scrollPosition.value)
          }
          // 更新curr的滚动位置
          if (scrollbarRef.value) {
            const cachePosition = scrollManager.getScrollPosition(curr)
            // 存在记录的上次的滚动位置
            if (cachePosition) {
              // 此处如若用 nextTick，会出现滚动条位置不对
              setTimeout(() => {
                scrollbarRef.value.scrollTop(cachePosition)
              })
            } else {
              scrollbarRef.value.scrollTop(0)
              scrollPosition.value = 0
            }
          }
          // 修复滚动条高度
          height_fixed.value++
          if (height_fixed.value == 4) {
            height_fixed.value = 0
          }
        }
      )

      // 处理滚动事件，更新滚动位置
      const onScroll = (ev: Event) => {
        const routeName = route.name as string | undefined
        if (typeof routeName === 'string' && cacheRoutes.includes(routeName)) {
          const target = ev.target as HTMLElement | null
          if (target) {
            scrollPosition.value = target.scrollTop
          }
        }
      }

      const height_fixed = ref(0)
      return {
        height_fixed,
        scrollbarRef,
        appStore,
        isShowTabbar,
        onScroll,
        route,
      }
    },
  })
</script>

<style lang="less" scoped>
  .vaw-main-layout-container {
    position: absolute;
    top: @logoHeight;
    left: calc(@menuWidth + @layout-padding + @layout-padding);
    right: 20px;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: left @transitionTime;

    .main-layout-scrollview {
      flex: 1;
      overflow: hidden;

      .main-body {
        width: 100%;
        height: 100%;
        padding-bottom: 20px;
      }
    }
    &.main-layout-open-status {
      left: calc(@menuWidth + @layout-padding + @layout-padding);
    }
    &.main-layout-close-status {
      left: 100px;
    }
  }
</style>

<style lang="less">
  .page-container {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    min-height: 100%;
    /* height: 100%; */
    background: #fff;
    padding: 20px;
    border-radius: 4px 0 4px 4px;
    /* margin-bottom: 20px; */
  }
  .disable-scroll-bar {
    > .arco-scrollbar-track-direction-vertical {
      width: 0 !important;
    }
    > .arco-scrollbar-container {
      overflow: hidden !important;
    }
  }
</style>
